import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Kbd, Link, Input, Navbar as HeroUINavbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, NavbarMenu, NavbarMenuItem } from "@heroui/react";
import { link as linkStyles } from "@heroui/react";
import clsx from "clsx";

import { siteConfig } from "@/config/site";
import { ThemeSwitch } from "@/components/theme-switch";
import {
  TwitterIcon,
  GithubIcon,
  DiscordIcon,
  HeartFilledIcon,
  SearchIcon,
} from "@/components/icons";
import { Logo } from "@/components/icons";
import { useUser } from "@/contexts/UserContext";

export const Navbar = () => {
  const { user, logout } = useUser();
  
  const searchInput = (
    <Input
      aria-label="Search"
      classNames={{
        inputWrapper: "bg-default-100",
        input: "text-sm",
      }}
      endContent={
        <Kbd className="hidden lg:inline-block" keys={["command"]}>
          K
        </Kbd>
      }
      labelPlacement="outside"
      placeholder="Search..."
      startContent={
        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
      }
      type="search"
    />
  );

  return (
    <HeroUINavbar 
      maxWidth="xl" 
      position="sticky"
      className="bg-[#74c0fc]"
    >
      <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
        <NavbarBrand className="gap-3 max-w-fit">
          <Link
            className="flex justify-start items-center gap-1"
            color="foreground"
            href="/"
          >
            <Logo />
            {/* <p className="font-bold text-inherit">首页</p> */}
          </Link>
        </NavbarBrand>
        <div className="hidden lg:flex gap-4 justify-start ml-2">
          {siteConfig.navItems.map((item) => (
            <NavbarItem key={item.href}>
              <Link
                className={clsx(
                  linkStyles({ color: "foreground" }),
                  "data-[active=true]:text-primary data-[active=true]:font-medium",
                )}
                color="foreground"
                href={item.href}
              >
                {item.label}
              </Link>
            </NavbarItem>
          ))}
        </div>
      </NavbarContent>

      {/* <NavbarContent
        className="hidden sm:flex basis-1/5 sm:basis-full"
        justify="end"
      >
        <NavbarItem className="hidden sm:flex gap-2">
          <Link isExternal href={siteConfig.links.twitter} title="Twitter">
            <TwitterIcon className="text-default-500" />
          </Link>
          <Link isExternal href={siteConfig.links.discord} title="Discord">
            <DiscordIcon className="text-default-500" />
          </Link>
          <Link isExternal href={siteConfig.links.github} title="GitHub">
            <GithubIcon className="text-default-500" />
          </Link>
          <ThemeSwitch />
        </NavbarItem>
        <NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem>
        <NavbarItem className="hidden md:flex">
          <Button
            isExternal
            as={Link}
            className="text-sm font-normal text-default-600 bg-default-100"
            href={siteConfig.links.sponsor}
            startContent={<HeartFilledIcon className="text-danger" />}
            variant="flat"
          >
            Sponsor
          </Button>
        </NavbarItem>
      </NavbarContent> */}

      <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
        {/* <Link isExternal href={siteConfig.links.discord}>
          <DiscordIcon className="text-default-500" />
        </Link>
        <ThemeSwitch /> */}
        <NavbarMenuToggle />
      </NavbarContent>

      {/* 用户信息区域 */}
      <NavbarContent className="hidden sm:flex basis-1/5 sm:basis-full" justify="end">
        {user ? (
          <Dropdown>
            <DropdownTrigger>
              <Button variant="light" className="text-white">
                {user.nickname || user.username}
              </Button>
            </DropdownTrigger>
            <DropdownMenu aria-label="User Actions">
              {/* <DropdownItem key="profile" as={Link} href="/profile">
                个人资料
              </DropdownItem>
              <DropdownItem key="settings" as={Link} href="/settings">
                设置
              </DropdownItem> */}
              <DropdownItem 
                key="logout" 
                onClick={logout}
                className="text-danger"
              >
                退出登录
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        ) : (
          <Button as={Link} href="/login" variant="flat" className="bg-blue-500 text-white">
            登录
          </Button>
        )}
      </NavbarContent>

      <NavbarMenu className="bg-[#74c0fc]">
        {searchInput}
        <div className="mx-4 mt-2 flex flex-col gap-2">
          {/* 主导航项 */}
          {siteConfig.navItems.map((item, index) => (
            <NavbarMenuItem key={`nav-${index}`}>
              <Link
                className="w-full text-white"
                href={item.href}
                size="lg"
              >
                {item.label}
              </Link>
            </NavbarMenuItem>
          ))}
          
          {/* 用户相关菜单项 */}
          {user ? (
            <>
              {/* <NavbarMenuItem>
                <Link className="w-full" href="/profile" size="lg">
                  个人资料
                </Link>
              </NavbarMenuItem>
              <NavbarMenuItem>
                <Link className="w-full" href="/settings" size="lg">
                  设置
                </Link>
              </NavbarMenuItem> */}
              <NavbarMenuItem>
                <Button 
                  className="w-full justify-start text-danger" 
                  variant="light"
                  onClick={logout}
                  size="lg"
                >
                  退出登录
                </Button>
              </NavbarMenuItem>
            </>
          ) : (
            <NavbarMenuItem>
              <Link className="w-full bg-blue-500 text-white rounded-lg px-4 py-2" href="/login" size="lg">
                登录
              </Link>
            </NavbarMenuItem>
          )}
        </div>
      </NavbarMenu>
    </HeroUINavbar>
  );
};